<template>
  <div>
    <a-modal v-model:visible="visible" :title="title"  width="40%" :afterClose="closeMoadal">
      <div>
        <div class="title">{{ row.data.title }}</div>
        <p>{{ row.data.uname }} - {{ formatDateTime(row.data.ctime) }}</p>
        <div>{{ row.data.content }}</div>
        <div id="content" v-for="src,index in row.data.appeal_imgs" :key="index">
          <img :src="'http://127.0.0.1:3000' + src" alt="">
        </div>
      </div>
      <template #footer>
        <a-button key="submit" type="primary" @click="handleOk">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref, } from 'vue';
import { formatDateTime } from '@/utils/formattime.js'
const emitFrensh = defineEmits(['on-close']) // 注册事件

const props = defineProps({
  row: {
    type: Array,
    require: true,
    default: [],
  },

});

// console.log(props.row.data);
const visible = ref(true)

const title = ref('诉求详情')

function handleOk() {
  visible.value = false
}

function closeMoadal() {
  emitFrensh('on-close', 0)
}

</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
}

#content {
  width: 500px;
  max-height: 600px;
  display: flex;
  flex-wrap: wrap;
}
#content > img{
  max-width: 500px !important;
  max-height: 600px !important;
}
</style>